<script setup>
import { reactive, ref } from "vue";
import { addApply } from "@/api/apply";
import { getsectorstaffApi } from "@/api/sectors";
import { useUserStore, useSectorsStore } from "@/stores/counter";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
const router = useRouter();
const sectorsStore = useSectorsStore();
const sectorMsg = sectorsStore.sectorsMsg;
const userStore = useUserStore();
const userMsg = userStore.userMsg;
const token = userMsg.token;
const typesss = ref(0);
const changeEve = val => {
  typesss.value = val;
};
const props = defineProps(["id"]);
const formSize = ref("default");
const ruleFormRef = ref();
const ruleForm = reactive({});
ruleForm.applyType = props.id - 0;
const submitForm = async formEl => {
  ruleForm.token = token;
  addApply(ruleForm).then(res => {
    console.log(res);
    if (res.data.code === 1) {
      ElMessage.success({ message: "申请成功，待审批" });
      ElMessage.success({ message: "即将跳转首页" });
      setTimeout(() => {
        router.push("/");
      }, 1000);
    } else {
      ElMessage.error({ message: res.data.msg });
    }
  });
};

const resetForm = formEl => {
  if (!formEl) return;
  formEl.resetFields();
};

const staffData = reactive([]);

const changeSector = async val => {
  staffData.splice(0);
  const obj = { token, sectorId: val };
  getsectorstaffApi(obj).then(res => {
    staffData.push(...res.data.data);
    console.log(staffData);
  });
};

const options = Array.from({ length: 10000 }).map((_, idx) => ({
  value: `${idx + 1}`,
  label: `${idx + 1}`,
}));
</script>

<template>
  <el-form
    ref="ruleFormRef"
    :model="ruleForm"
    label-width="120px"
    class="demo-ruleForm"
    :size="formSize"
    status-icon>
    <el-form-item label="申请标题">
      <el-input v-model="ruleForm.title" />
    </el-form-item>

    <el-form-item label="申请类型">
      <el-select
        v-model.number="ruleForm.applyType"
        placeholder="选择申请类型"
        @change="changeEve">
        <el-option label="请假申请" :value="0" />
        <el-option label="加班申请" :value="1" />
        <el-option label="补卡申请" :value="2" />
        <el-option label="出差申请" :value="3" />
        <el-option label="离职申请" :value="4" />
        <el-option label="招聘申请" :value="5" />
        <el-option label="经费申请" :value="6" />
      </el-select>
    </el-form-item>
    <!-- 请假 加班 出差 显示 -->
    <el-row v-if="typesss === 1 || typesss === 0 || typesss === 3">
      <el-col>
        <el-form-item label="开始时间">
          <el-date-picker
            v-model="ruleForm.startTime"
            type="datetime"
            placeholder="选择日期"
            format="YYYY/MM/DD hh:mm:ss"
            value-format="x" />
        </el-form-item>
      </el-col>
      <el-col>
        <el-form-item label="结束时间">
          <el-date-picker
            v-model="ruleForm.endTime"
            type="datetime"
            placeholder="选择日期"
            format="YYYY/MM/DD hh:mm:ss"
            value-format="x" />
        </el-form-item>
      </el-col>
    </el-row>

    <!-- 补卡 离职 显示 -->
    <el-row v-if="typesss === 2 || typesss === 4">
      <el-col>
        <el-form-item label="申请日期">
          <el-date-picker
            v-model="ruleForm.singleTime"
            type="datetime"
            placeholder="选择日期"
            format="YYYY/MM/DD hh:mm:ss"
            value-format="x" />
        </el-form-item>
      </el-col>
    </el-row>

    <!-- 招聘 显示 -->
    <el-row v-if="typesss === 5">
      <el-form-item label="申请岗位">
        <el-input v-model="ruleForm.job" />
      </el-form-item>
    </el-row>

    <!-- 经费 显示 -->
    <el-row v-if="typesss === 6">
      <el-form-item label="申请金额" disabled>
        <el-input v-model="ruleForm.money" />
      </el-form-item>
      <el-form-item label="付款期限">
        <el-date-picker
          v-model="ruleForm.payEndTime"
          type="datetime"
          placeholder="选择日期"
          format="YYYY/MM/DD hh:mm:ss"
          value-format="x" />
      </el-form-item>
    </el-row>

    <el-form-item label="申请原因">
      <el-input v-model="ruleForm.content" type="textarea" />
    </el-form-item>

    <el-form-item label="审批人">
      <el-select
        v-model="ruleForm.approveSec"
        placeholder="选择部门"
        @change="changeSector">
        <el-option
          v-for="item in sectorMsg"
          :label="item.sectorName"
          :value="item.sectorId" />
      </el-select>
      <el-select v-model.number="ruleForm.approve" placeholder="选择员工">
        <el-option
          v-for="item in staffData"
          :label="item.staffName"
          :value="item.staffId" />
      </el-select>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)">
        发起申请
      </el-button>
      <el-button @click="resetForm(ruleFormRef)">重置申请</el-button>
      <el-button @click="$router.push('/')">返回首页</el-button>
    </el-form-item>
  </el-form>
</template>
